<template>
	<div>
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<div class="user-main-box">
			<user-tab-list :list="tablist" :returnButton="true" backUrl="/user/account"></user-tab-list>
			<div class="form-input-area" style="padding-bottom:0!important">
				<Row :gutter="20">
					<Col :span="12">
					<div class="box-area" style="position: relative">
						<Spin :withIcon="true" v-if="formLoading"></Spin>
						<div class="line-item">
							<span class="name">可用金额</span>
							<span class="f-16 c-o">{{ $store.state.user.balance }}元</span>
						</div>
						<div class="line-item flx-row-s-s">
							<span class="name">提现金额</span>
							<div>
								<div class="flx-row-s-c">
									<input type="text" v-model="money" placeholder="请输入" class="bankNumber"
										style="width: 100px; margin-right: 10px" @input="inputNumberChange"
										@paste="paste" />
									<span class="f-14 c-black">元</span>
									<span class="o-form-font-button f-w-600" style="margin-left: 12px"
										@click="cashOutAll">全部提现</span>
								</div>
								<div class="c-black" style="margin-top: 20px">
									提现手续费：
									<span class="c-o"
										style="padding-right: 10px">{{ drawCommission.toFixed(2) }}元</span>
									实际到账：
									<span
										class="c-o">{{ money !== '' ? money - drawCommission > 0 ? (money - drawCommission).toFixed(2) : 0.00 : 0.00 }}元</span>
								</div>
							</div>
						</div>
						<div class="line-item flx-row-s-c">
							<span class="name">提现账号</span>
							<Select v-model="bankValue" style="width: 306px" filterable @on-select="bankChange">
								<Option v-for="item in cardList" :value="item.id"
									:label="item.bankName + ' - ' + item.cardNumber" :key="item.id">
									<div>
										<p class="bank-font bank-number">{{ item.bankName }}</p>
										<p class="bank-font">{{ item.cardNumber }}</p>
									</div>
								</Option>
							</Select>
							<span class="o-form-font-button f-w-600" style="margin-left: 12px"
								@click="showAddBankCardModal">
								+新增银行卡
							</span>
							<add-bank-card-modal :show.sync="addBankCardModalShow"
								@add-success="getBankCardList"></add-bank-card-modal>
							<span class="o-form-font-button f-w-600" style="margin-left: 36px"
								@click="showBankCardListModal">
								我的银行卡
							</span>
							<bank-card-list-modal :show.sync="bankCardListModalShow" @add-card="showAddBankCardModal"
								@delete-success="deleteSuccess"></bank-card-list-modal>
						</div>
						<div class="user-strong-button submit-button-size" @click="submit">
							申请提现
						</div>
					</div>
					</Col>
					<Col :span="12">
					<div class="remind-area flx-col">
						<span class="c-block f-16 f-w-600">190提现须知：</span>
						<span class="c-g pub-m-t-14">1、银行卡账号主要用于提现。请确保您添加的银行卡号与您身份证上的姓名一致，否则提现审核将会失败。</span>
						<span class="c-g pub-m-t-14">2、可提现金额为账户的可用余额，不包括冻结金额。<span class="c-o">提现金额需不少于10元</span>，且不超过可用余额。</span>
						<span class="c-g pub-m-t-14">3、每账号每天最多申请提现10次，<span class="c-o">单次提现服务手续费为1%</span>，金额四舍五入，保留小数点后 2 位，最低收费1元。</span>
						<span class="c-g pub-m-t-14">4、如在提现过程中遇到问题，请拨打客服电话：400-8788-585，或通过微信联系在线客服：18922836153（手机微信同号）。</span>
					</div>
					</Col>
				</Row>
			</div>
		</div>

		<div class="user-main-box pub-m-t-20">
			<user-tab-list :list="tablistTemp"></user-tab-list>
			<div style="position: relative">
				<Spin :withIcon="true" v-if="listLoading"></Spin>
				<table class="table-area" style="margin-top: 20px">
					<thead>
						<tr>
              <th>
                <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
              </th>
							<th>
								<div class="line-style">提现日期</div>
							</th>
							<th>
								<div class="line-style">提现银行</div>
							</th>
							<th>
								<div class="line-style">提现账号（后4位）</div>
							</th>
							<th>
								<div class="line-style">提现金额</div>
							</th>
							<th>
								<div class="line-style">提现手续费</div>
							</th>
							<th>
								<div class="line-style">到账金额</div>
							</th>
							<th>
								<div class="line-style">提现状态</div>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in list" :key="index"
							:class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f f-ell-sin" title="">{{ index + 1 + (page - 1) * pageSize }}</span>
                </div>
              </td>
							<td>
								<div class="line-style">
									<span class="normal-f">{{ item.createdTime }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f f-ell-sin">{{ item.bankName }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f">{{ item.cardNo }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f">￥{{ item.payable }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f">￥{{ item.commission }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f">￥{{ item.amount }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f f-ell-sin">{{
                    item.status == 0
                      ? "待审核"
                      : item.status == 1
                      ? "待转账"
                      : item.status == 2
                      ? "转账成功"
                      : item.status == 3
                      ? "转账失败"
                      : item.status == 4
                      ? "审核失败"
                      : "用户取消"
                  }}</span>
									<span class="b-form-font-button" v-if="item.status == 0"
										@click="cancel(item.id)">取消申请</span>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				<Empty-State v-if="total != null && total == 0" content="未搜索到任何内容！"></Empty-State>
				<div class="form-page-bottom-area flx-row-c-c">
					<Page :total="total" :current="page" :page-size="pageSize" :page-size-opts="pageSizeOpts"
						@on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer
						show-total />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCashOutRecord,
		cancelCashOut,
		getBankCardList,
		getCashOutLevel,
		createCashOut,
	} from "@/api/user";
	import {
		mapActions
	} from "vuex";
	import Tools from "@/utils/tools";
	import {
		getBottom
	} from "@/api/data";
	export default {
		name: "VipAccountRecharge",
		components: {
			addBankCardModal: () =>
				import("_c/modal/addBankCardModal/addBankCardModal.vue"),
			bankCardListModal: () =>
				import("_c/modal/bankCardListModal/bankCardListModal.vue"),
		},
		data() {
			return {
				formLoading: false,
				listLoading: false,

				breadCrumb: [{name: "管理中心"},{
					name: "财务管理"
				}, {
					name: "账户信息"
				}],
				tablist: [{
					name: "资金提现",
					to: "/user/recharge",
				}, ],
				tablistTemp: [{
					name: "提现记录",
					to: "/user/recharge",
				}, ],
				registerDate: null,
				registerDateList: [{
						value: 1,
						label: "不限",
					},
					{
						value: 2,
						label: "2017年以前",
					},
					{
						value: 3,
						label: "2016年以前",
					},
				],
				test: "",
				// 表单信息
				money: "",
				levelRatio: null,
				cardList: [],
				bankValue: "",
				banKLabel: "",
				// 分页设置
				total: null,
				pageSizeOpts: [10, 20, 50, 100, 200],
				pageSize: 10,
				page: 1,
				list: [],

				// 弹窗信息
				addBankCardModalShow: false,
				bankCardListModalShow: false,
				colorType: 0,
			};
		},
		created() {
			this.getCashOutLevel();
			this.getBankCardList();
			this.getCashOutRecord();
			if (this.$storage.getColorType()) {
				this.colorType = this.$storage.getColorType();
			} else {
				this.getBottom();
			}
		},
		methods: {
			...mapActions(["getAmountData"]),
			async getBottom() {
				const {
					code,
					data
				} = await getBottom();
				if (code === 200) {
					this.colorType = data.colorType;
				}
			},
			// 拦截贴贴事件
			paste(e) {
				e.preventDefault();
				return "";
			},
			// 获取提现手续费比例
			async getCashOutLevel() {
				let res = await getCashOutLevel();
				if (res.code == 200) {
					this.levelRatio = res.data.withdrawRate * 0.01;
				}
			},
			// 提交表单
			submit() {
				if (this.$store.state.user.balance <= 0) {
					this.$Message.warning("账户里没有可用金额！");
					return;
				}
				if (!this.money) {
					this.$Message.warning("请输入提现金额！");
					return;
				}
				if (!this.bankValue) {
					this.$Message.warning("请选择银行账号！");
					return;
				}
				if (this.money < 1.01) {
					this.$Message.warning("提现金额不能小于1.01元！");
					return;
				}
				if (Number(this.money) > Number(this.$store.state.user.balance)) {
					this.$Message.warning("提现金额不能大于可用余额！");
					return;
				}
				this.$Modal.confirm({
					title: "提现确认",
					content: `
          <p>确定要提现<span class="c-r f-w-600 f-18" style="padding:0 5px;">${
            this.money
          }元</span>至</p>
          <p style="margin:8px 0;"><span class="c-o f-w-600">${
            this.banKLabel
          }</span>吗？</p>
          <p style="text-align:right;">手续费<span class="c-o f-w-600">${this.money < 100 ? 1 : Tools.accMul(
            this.money,
            this.levelRatio
          )}元</span></p>
        `,
					onOk: async () => {
						this.formLoading = true;
						let data = {
							bankCardId: this.bankValue,
							amount: this.money,
						};
						let res = await createCashOut(data);
						if (res.code == 200) {
							this.$Message.success("申请成功！");
							this.money = "";
							this.bankValue = null;
							this.banKLabel = "";
							this.pageChange(1);
							this.getAmountData();
						}
						this.formLoading = false;
					},
				});
			},
			// 数值改变
			inputNumberChange() {
				if (this.money == null) return;
				var money = this.money.replace(/[^\d.]/g, "");
				if (/^(\.)$/.test(money)) {
					money = "0.";
				}
				if (/^(\d?)+(\.\d{0,2})?$/.test(money)) {
					//正则验证，提现金额小数点后不能大于两位数字
					if (/^(0[0]*)$/.test(money)) {
						this.money = money.replace(/^(0*)/g, "0");
					} else if (/^(0[1-9]*)$/.test(money)) {
						this.money = money.replace(/^(0*)/g, "");
					} else {
						this.money = money;
					}
				} else {
					this.money = money.substring(0, money.length - 1);
				}
				/*if (Number(this.money) > Number(this.$store.state.user.balance)) {
				  this.money = this.$store.state.user.balance
				}*/
			},
			// 获取提现记录列表
			async getCashOutRecord() {
				this.listLoading = true;
				let params = {
					limit: this.pageSize,
					page: this.page,
				};
				let res = await getCashOutRecord(params);
				if (res.code == 200) {
					if (
						this.page > 1 &&
						res.data.total <= (this.page - 1) * this.pageSize
					) {
						this.page =
							res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
						this.getCashOutRecord();
						return;
					}
					this.list = res.data.list;
					this.total = res.data.total;
				}
				this.listLoading = false;
			},
			// 获取银行卡列表
			async getBankCardList() {
				let params = {
					limit: 99999,
					page: 1,
				};
				let res = await getBankCardList(params);
				if (res.code == 200) {
					this.cardList = res.data.list;
				}
			},
			// 提现所有
			cashOutAll() {
				if (this.$store.state.user.balance > 0) {
					this.money = this.$store.state.user.balance;
				} else if (this.$store.state.user.balance <= 0) {
					this.$Message.warning("账户里没有可用金额！");
				} else {
					this.$Message.warning("账户可用金额获取失败！");
				}
			},
			// 选择的银行卡改变
			bankChange(item) {
				this.banKLabel = item.label;
				this.bankValue = item.value;
			},
			// 切换页码
			pageChange(page) {
				this.page = page;
				this.getCashOutRecord();
			},
			// 切换pageSize
			pageSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.pageChange(1);
			},
			// 取消申请
			cancel(id) {
				this.$Modal.confirm({
					title: "取消确认",
					content: "<p>确定要取消此提现申请吗？</p>",
					onOk: async () => {
						let res = await cancelCashOut(id);
						if (res.code == 200) {
							this.$Message.success("取消成功！");
							this.getCashOutRecord();
							this.getAmountData();
						}
					},
				});
			},
			// 打开添加银行卡modal
			showAddBankCardModal() {
				if (this.bankCardListModalShow) this.bankCardListModalShow = false;
				this.addBankCardModalShow = true;
			},
			// 打开我的银行卡列表modal
			showBankCardListModal() {
				this.bankCardListModalShow = true;
			},
			// 删除银行卡成功
			deleteSuccess(id) {
				let temp = -1;
				for (let i in this.cardList) {
					if (this.cardList[i].id == id) {
						temp = i;
						break;
					}
				}
				if (temp != -1) {
					this.cardList.splice(temp, 1);
				}
			},
		},
		computed: {
			drawCommission() {
				if (
					this.levelRatio != null &&
					this.money != null &&
					this.money != "" &&
					!isNaN(this.money)
				) {
					if (this.money < 100) {
						return 1;
					} else {
						return Tools.accMul(this.money, this.levelRatio);
					}
				} else {
					return 0;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.remind-area {
		padding: 15px 21px 37px;
		border-radius: 10px;
		font-size: 14px;
		border: 1px solid #F68A0C;
		background-color: #FFF2E2;
	}

	.box-area {

		.line-item {
			margin-bottom: 13px;
		}

		.name {
			text-align: right;
			margin-right: 25px;
			font-size: 14px;
			color: #000;
			line-height: 32px;

			&::after {
				content: ":";
			}
		}

		.bank-font {
			text-align: left;
		}

		.bank-number {
			font-size: 12px;
			color: #999999;
		}

		.pay-method-box {
			@include size(150px, 50px);
			border: 1px solid #dcdee2;
			padding: 12px 13px 12px 53px;
			border-radius: 5px;
			transition: border-color 0.3s, color 0.3s;
			font-size: 14px;
			color: rgba(#3d3d3d, 0.9);
			cursor: pointer;
			margin-right: 20px;

			&:hover,
			.active {
				border-color: #f9521f;
				color: #f9521f;
			}

			&.p-i-1 {
				@include bg-setting("p-i-1", 24px 24px, 19px center);
			}

			&.p-i-2 {
				@include bg-setting("p-i-2", 27px 25px, 13px center);
			}

			&.p-i-3 {
				@include bg-setting("p-i-3", 31px 19px, 13px center);
			}
		}

		.submit-button-size {
			@include size(118px, 41px);
			@include btn-s(null, 41px, 5px);
			margin: 20px 0 0 85px;
		}

		.box-title {
			font-size: 14px;
			color: #3d3d3d;
			border-bottom: #f9521f solid 2px;
			line-height: 30px;
			width: max-content;
		}

		img {
			width: 195px;
			margin-top: 20px;
			margin-right: 38px;
		}
	}

	.bankNumber {
		border: 1px solid #dcdee2;
		border-radius: 4px;
		width: 100%;
		height: 32px;
		line-height: 1.5;
		padding: 4px 7px;
		font-size: 14px;
		transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
			box-shadow 0.2s ease-in-out;
		background-color: #fff;
		color: #20213c;
	}

	.bankNumber::placeholder {
		color: #c5c8ce;
	}

	.bankNumber:focus,
	.bankNumber:hover {
		border-color: #fc461e !important;
		box-shadow: none !important;
	}

	.form-input-area {
		padding: 30px 20px 60px !important;
	}
</style>
